import classNames from 'classnames'

import { Icon } from '@/components/Icon'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'
import { useInitialState } from '@/utils/use-initial-state'
import { getAllChannel } from '@/store/actions/home'
import { delChannel, addChannel } from '@/store/actions/home'
import { useState } from 'react'
import { Channel } from '@/types/data'

type Props = {
	onClose: () => void
}

const Channels = ({ onClose }: Props) => {
	const { userChannel, channelActiveKey } = useSelector(
		(state: RootState) => state.home
	)

	const dispatch = useDispatch()
	// 是否为编辑状态
	const [isEdit, setIsEdit] = useState(false)

	//渲染可选频道
	const { restChannel } = useInitialState(getAllChannel, 'home')

	//编辑2
	const onChangeEdit = () => {
		setIsEdit(!isEdit)
	}

	//拿到切换切换高亮状态
	const onChannelClick = (channel: Channel) => {
		//判断是否编辑状态
		if (!isEdit) {
			dispatch({ type: 'home/changeTab', payload: channel.id + '' })
			onClose()
			return
		}
		// 是编辑状态，执行删除频道操作
		console.log('删除频道', channelActiveKey, channel.id)
		// 判断是否为推荐频道 或 长度小于等于4
		// 如果是当前选中项也不允许删除
		if (channel.id === 0) return
		if (userChannel.length <= 4) return
		dispatch(delChannel(channel))

		// 如果是当前选中项也不允许删除
		// if (channel.id === channelActiveKey) return
	}

	// 添加频道
	const onAddChannel = (channel: Channel) => {
		dispatch(addChannel(channel))
	}

	return (
		<div className={styles.root}>
			<div className='channel-header'>
				<Icon type='iconbtn_channel_close' onClick={onClose} />
			</div>
			<div className='channel-content'>
				{/* 编辑时，添加类名 edit */}
				<div className={classNames('channel-item', isEdit && 'edit')}>
					<div className='channel-item-header'>
						<span className='channel-item-title'>我的频道</span>
						<span className='channel-item-title-extra'>
							点击进入频道
						</span>
						<span
							className='channel-item-edit'
							onClick={onChangeEdit}
						>
							{isEdit ? '保存' : '编辑'}
						</span>
					</div>
					<div className='channel-list'>
						{/* 选中时，添加类名 selected */}
						{userChannel.map((item) => (
							<span
								key={item.id}
								className={classNames(
									'channel-list-item',
									channelActiveKey === item.id + '' &&
										'selected'
								)}
								onClick={() => onChannelClick(item)}
							>
								{item.name}
								<Icon type='iconbtn_tag_close' />
								{/* 排除 推荐 以及 当前选中项的 删除的图标 */}
								{/* {item.id !== 0 && item.id !== channelActiveKey && (
                  <Icon type="iconbtn_tag_close" />
                )} */}
							</span>
						))}
					</div>
				</div>

				<div className='channel-item'>
					<div className='channel-item-header'>
						<span className='channel-item-title'>可选频道</span>
						<span className='channel-item-title-extra'>
							点击添加频道
						</span>
					</div>
					<div className='channel-list'>
						{restChannel.map((item) => (
							<span
								onClick={() => onAddChannel(item)}
								key={item.id}
								className='channel-list-item'
							>
								+ {item.name}
							</span>
						))}
					</div>
				</div>
			</div>
		</div>
	)
}
export default Channels
